<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <el-tabs tab-position="left" style="width:98%">
            <el-tab-pane
              :label="group.groupName"
              v-for="(group,gidx) in dataResp.groups"
              :key="group.groupId"
            >
              <!-- 遍历属性,每个tab-pane对应一个表单，每个属性是一个表单项  spu.attrs[0] = [{attrId:xx,val:}]-->
              <el-form ref="form" :model="dataResp">
                <el-form-item
                  :label="attr.attrName"
                  v-for="(attr,aidx) in group.attrs"
                  :key="attr.attrId"
                >
                  <el-input
                    v-model="dataResp.attrs[gidx][aidx].attrId"
                    type="hidden"
                    v-show="false"
                  ></el-input>
                  <el-select
                    v-model="dataResp.attrs[gidx][aidx].attrValue"
                    :multiple="attr.valueType == 1"
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择或输入值"
                  >
                    <el-option
                      v-for="(val,vidx) in attr.valueSelect.split(';')"
                      :key="vidx"
                      :label="val"
                      :value="val"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
          <div style="margin:auto">
            <el-button type="success" style="float:right" @click="submitClubMemberAttrs">确认修改</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      memberId: "",
      catId: "",
      dataResp: {
        //后台返回的所有数据
        groups: [],
        attrs: []
      },
      attrsMap: {}
    };
  },
  computed: {},
  methods: {
    clearData(){
      this.dataResp.groups = [];
      this.dataResp.attrs = [];
      this.attrsMap = {};
    },
    getClubMemberAttrs() {
      this.$http({
        url: this.$http.adornUrl(`/rank/attr/listformember/${this.memberId}`),
        method: "get"
      }).then(({ data }) => {
        data.data.forEach(item => {
          this.attrsMap["" + item.attrId] = item;
        });
        console.log("~~~~", this.attrsMap);
      });
    },
    getQueryParams() {
      this.memberId = this.$route.query.memberId;
      this.catId = this.$route.query.catId;
      console.log("----", this.memberId, this.catId);
    },
    showAttrs() {
      let _this = this;
      this.$http({
        url: this.$http.adornUrl(
          `/rank/attrgroup/${this.catId}/withattr`
        ),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        console.log(data);
        //先对表单的baseAttrs进行初始化
        data.data.forEach(item => {
          let attrArray = [];
          item.attrs.forEach(attr => {
            let v = "";
            if (_this.attrsMap["" + attr.attrId]) {
              v = _this.attrsMap["" + attr.attrId].attrValue.split(";");
              if (v.length == 1) {
                v = v[0] + "";
              }
            }
            attrArray.push({
              attrId: attr.attrId,
              attrName: attr.attrName,
              attrValue: v
            });
          });
          this.dataResp.attrs.push(attrArray);
        });
        this.dataResp.groups = data.data;
      });
    },
    submitClubMemberAttrs() {
      console.log("·····", this.dataResp.attrs);
      //spu_id  attr_id  attr_name             attr_value             attr_sort  quick_show
      let submitData = [];
      this.dataResp.attrs.forEach(item => {
        item.forEach(attr => {
          let val = "";
          if (attr.attrValue instanceof Array) {
            val = attr.attrValue.join(";");
          } else {
            val = attr.attrValue;
          }

          if (val != "") {
            submitData.push({
              attrId: attr.attrId,
              attrName: attr.attrName,
              attrValue: val
            });
          }
        });
      });

      this.$confirm("修改榜单成员的属性信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/rank/attr/update/${this.memberId}`),
            method: "post",
            data: this.$http.adornData(submitData, false)
          }).then(({ data }) => {
            this.$message({
              type: "success",
              message: "属性修改成功!"
            });
          });
        })
        .catch((e) => {
          this.$message({
            type: "info",
            message: "已取消修改"+e
          });
        });
    }
  },
  created() {},
  activated() {
    this.clearData();
    this.getQueryParams();
    if (this.memberId && this.catId) {
      this.showAttrs();
      this.getClubMemberAttrs();
    }
  }
};
</script>
<style scoped>
</style>